// 给组件添加交互功能
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById("root"));
class Square extends React.Component {
	constructor(props) {
			/** 
			 * 每次你定义其子类的构造函数时，都需要调用 super 方法。
			 * 因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头 
			 */
	    super(props);
	    this.state = {
	      value: null,
	    };
	  }
  render() {
    return (
			/** 
			 * 为了少输入代码，同时为了避免 this 造成的困扰，我们在这里使用箭头函数 来进行事件处理
			 * 为了更好的可读性，将 className 和 onClick 的 prop 分两行书写 
			 */
      <button
				className="square"
				onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
     return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

root.render(<Game />);
